@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

$defaultDuration: .3s;

body {
  background: #f1f5fd;
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// main-container global css
.app-container {
  padding: 20px;
}

.chart-template {
  height: 300px;
  display: inline-block;
  background: white;
  border-radius: $radiusPx;
  padding: 15px 10px;
}

.float-right {
  float: right;
  i[class^="el-icon-"] {
    margin-left: 15px;
    cursor:pointer;
  }
}

.gray-text {
  color: #889da5;
}
.list-template {
  background: white;
  padding: 15px;
  border-radius: $radiusPx;
}

@mixin hideTapHighlightColor() {
	//Prevent highlight colour when element is tapped
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

@mixin hardwareAccel() {
	//Improve performance on mobile/tablet devices
	transform: translateZ(0);
}

@mixin improveAntiAlias() {
	//Improve aliasing on mobile/tablet devices
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.float-shadow {
	display: inline-block;
	position: relative;
	transition-duration: $defaultDuration;
	transition-property: transform;
  cursor: pointer;

	@include hideTapHighlightColor();
	@include hardwareAccel();
	@include improveAntiAlias();

	// &:before {
	// 	pointer-events: none;
	//   position: absolute;
	//   z-index: -1;
	//   content: '';
	//   top: 100%;
	//   left: 5%;
	//   height: 10px;
	//   width: 90%;
	//   opacity: 0;
	//   background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
	// 	transition-duration: $defaultDuration;
	// 	transition-property: transform opacity;
	// }

	&:hover {
		transform: translateY(-5px); /* move the element up by 5px */
    box-shadow: 0px 1px 35px 0px rgb(0 0 0 / 10%);
	}
}

.box-shadow-template {
  box-shadow: 0 0 10px rgb(0 0 0 / 5%);
}
